<ion-header>
  <ion-toolbar>
    <ion-title>System</ion-title>
    <ion-buttons slot="end">
      <badge-menu-button></badge-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding with-widgets">
  <!-- loading -->
  <ng-template #loading>
    <text-spinner text="Connecting to server"></text-spinner>
  </ng-template>

  <!-- loaded -->
  <ion-item-group *ngIf="server$ | async as server; else loading">
    <ion-item
      *ngIf="!server['ntp-synced']"
      color="warning"
      class="ion-margin-bottom"
    >
      <ion-icon slot="start" name="warning-outline"></ion-icon>
      <ion-label>
        <h2 style="font-weight: bold">Clock sync failure</h2>
        <p style="font-weight: 600">
          This will cause connectivity issues. Refer to the StartOS docs to
          resolve the issue.
        </p>
      </ion-label>
      <ion-button
        slot="end"
        color="light"
        href="https://docs.start9.com/0.3.5.x/support/common-issues#clock-sync-failure"
        target="_blank"
        rel="noreferrer"
      >
        Open Docs
        <ion-icon slot="end" name="open-outline"></ion-icon>
      </ion-button>
    </ion-item>

    <ion-item *ngIf="isTorHttp" color="warning" class="ion-margin-bottom">
      <ion-icon slot="start" name="warning-outline"></ion-icon>
      <ion-label>
        <h2 style="font-weight: bold">Http detected</h2>
        <p style="font-weight: 600">
          Tor is faster over https.
          <a
            [routerLink]="['/system', 'root-ca']"
            style="color: var(--ion-color-light)"
          >
            Download and trust your server's Root CA
          </a>
          , then switch to https.
        </p>
      </ion-label>
      <ion-button slot="end" color="light" (click)="launchHttps()">
        Open Https
        <ion-icon slot="end" name="open-outline"></ion-icon>
      </ion-button>
    </ion-item>

    <div *ngFor="let cat of settings | keyvalue : asIsOrder">
      <ion-item-divider>
        <ion-text color="dark" (click)="addClick(cat.key)">
          {{ cat.key }}
        </ion-text>
      </ion-item-divider>
      <!-- <theme-switcher *ngIf="cat.key === 'Manage'"></theme-switcher> -->
      <ion-item
        *ngFor="let button of cat.value"
        button
        [style.display]="(button.title === 'Repair Disk' && !(showDiskRepair$ | async)) ? 'none' : 'block'"
        [detail]="button.detail"
        [disabled]="button.disabled$ | async"
        (click)="button.action()"
      >
        <ion-icon slot="start" [name]="button.icon"></ion-icon>
        <ion-label>
          <h2>{{ button.title }}</h2>
          <p *ngIf="button.description">{{ button.description }}</p>

          <!-- "Create Backup" button only -->
          <p *ngIf="button.title === 'Create Backup'">
            <ng-container *ngIf="server['status-info'] as statusInfo">
              <ion-text
                [color]="server['last-backup'] | backupColor"
                *ngIf="!statusInfo['backup-progress'] && !statusInfo['update-progress']"
              >
                Last Backup: {{ server['last-backup'] ? (server['last-backup'] |
                date: 'medium') : 'never' }}
              </ion-text>
              <span *ngIf="!!statusInfo['backup-progress']" class="inline">
                <ion-spinner
                  color="success"
                  style="height: 12px; width: 12px; margin-right: 6px"
                ></ion-spinner>
                <ion-text color="success">Backing up</ion-text>
              </span>
            </ng-container>
          </p>
          <!-- "Software Update" button only -->
          <p *ngIf="button.title === 'Software Update'">
            <ion-text
              *ngIf="server['status-info'].updated; else notUpdated"
              class="inline"
              color="warning"
            >
              Update Complete. Restart to apply changes
            </ion-text>
            <ng-template #notUpdated>
              <ng-container *ngIf="showUpdate$ | async; else check">
                <ion-text class="inline" color="success">
                  <ion-icon name="rocket-outline"></ion-icon>
                  Update Available
                </ion-text>
              </ng-container>
              <ng-template #check>
                <ion-text class="inline" color="dark">
                  <ion-icon name="refresh"></ion-icon>
                  Check for updates
                </ion-text>
              </ng-template>
            </ng-template>
          </p>
        </ion-label>
      </ion-item>
    </div>
  </ion-item-group>
</ion-content>
